<template>
	<div class="task-container">
		<div class="title" v-if="title && !hideTitle">{{title}}</div>
		<div class="task-list">

			<template v-for="(task,index) in taskList" :key="task.id">

				<view class="line">
				</view>

				<div class="task-item">
					<div class="task-info">
						<view style="display: flex;flex-direction: row; align-items: center;margin: 0 0 5px 0;">
							<view class="task-name">{{ task.task_title || '任务标题' }}</view>
							<div class="task-reward">
								<text class="reward-icon"> 🎁</text>
								{{ task.task_reward }} 活动金
							</div>
						</view>
						<view class="task-desc">{{ task.task_description || ''}}</view>
					</div>
					<div class="task-action">
						<button class="action-btn">
							{{task.task_go_text || '去完成'}}
						</button>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		name: "ActTaskReward",
		props: {
			title: {
				type: String,
				default: '活动任务导航'
			},
			hideTitle: {
				type: Boolean,
				default: false
			},
			taskList: {
				type: Array,
				required: true
				/*,
								validator: value => {
									return value.every(task => ['id', 'name', 'description', 'reward', 'completed', 'claimed'].every(
										prop =>
										prop in task
									))
								}*/
			}
		},
		methods: {


		}
	}
</script>

<style scoped>
	.task-container {
		width: 360px;
		margin: 7.5px 7.5px;
		background: #fff;
		border-radius: 8px;
		position: relative;
		z-index: 1;
		border: 1px solid #eee;
	}

	.title {
		font-size: 18px;
		font-weight: 900;
		padding-left: 10px;
		line-height: 40px;
		height: 40px;
		border-bottom: 1px solid #eee;
		color: #333;
	}

	.task-list {}

	.task-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		margin: 0 0;
		background: white;
		border-radius: 6px;
		transition: all 0.3s ease;
	}

	.task-item.completed {}

	.task-item.claimed {
		opacity: 0.7;
	}

	.task-info {
		flex: 1;
	}

	.task-name {
		font-size: 16px;
		color: #34495e;
	}

	.task-desc {
		margin: 0;
		color: #7f8c8d;
		font-size: 12px;
	}

	.task-reward {
		color: #e67e22;
		font-weight: bold;
	}

	.reward-icon {
		margin-right: 0px;
		margin-left: 7.5px;
	}

	.action-btn {
		padding: 8px 20px;
		border: none;
		border-radius: 40px;
		background: #F34936;
		color: white;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.action-btn:disabled {
		background: #bdc3c7;
		cursor: not-allowed;
	}

	.action-btn:not(:disabled):hover {
		background: #2980b9;
		transform: translateY(-1px);
	}

	.line:nth-child(n+1) {
		border-top: 1px solid #F0F4F6;
		width: 329px;
		margin-left: 15.5px;
		height: 2px;
	}
</style>
